<template>
	<view class="TutorStatusCards" v-for="(item,index) in list" :key="index" @tap="goDetails(item)">
		<view class="card item">
			<view class="top">
				<view style="display: flex;align-items: center;">
					<tui-icon margin="4rpx" size="20" name="order"></tui-icon>
					<text>订单号：{{item.id}}</text>
				</view>
				<text class="invite" v-if="item.status*1===1">邀约中</text>
				<text class="invite" v-else-if="item.status*1===2">已确认</text>
				<text class="invite" v-else-if="item.status*1===3">待开始</text>
				<text class="invite" v-else-if="item.status*1===4">服务中</text>
				<text class="invite" v-else-if="item.status*1===5">待评价</text>
				<text class="invite" v-else-if="item.status*1===6">已完成</text>
				<text class="invite" v-else-if="item.status*1===7">已关闭</text>
				<text class="invite" v-else-if="item.status*1===8">拒绝</text>
			</view>
			<view class="content">
				<view class="content_lt">
					<image class="image" :src="ossUrl+item.assistant.masterImg" mode="aspectFill"></image>
				</view>
				<view class="content_rt">
					<view class="tp">
						<view class="tp_lt">
							<text>{{item.assistant.assistantName}}</text>
							<!-- <tui-icon margin="20rpx" size="20"   name="order"></tui-icon> -->
						</view>
						<text class="tp_rt">￥{{item.orderAmount}}</text>
					</view>
					<view class="ct">
						<text class="ct_lt">{{item.assistant.categoryName}}</text>
						<text class="ct_rt">{{item.hourNumber+'小时'}}</text>
					</view>
					<view class="bt">
						<text>￥{{item.assistant.rates}}/小时</text>
					</view>
				</view>
			</view>
			<view class="flex align-center justify-between mx-2 fs-24 ft777777 mb-1">
				<text>车程计价{{item.transportFeeUnitPrice||0}}元/km，全程{{item.distance || 0}}km</text>
				<view class="ft333333 flex align-center">车费：<text
						class="ft63d6d3 font-weight-bold fs-28">￥{{item.transportFee || 0}}</text></view>
			</view>
			<view class="bottom">
				<text>下单时间：{{item.orderTime}}</text>
				<view class="total"><text>合计:</text><text class="totalPrice">￥{{ item.actualAmount }}</text></view>
			</view>
			<view class="footer">
				<view class="button_item">
					<tui-form-button @click="clickOrder(item,'支付')" margin="0 0 0 20rpx" v-if="item.status*1===2" width="160rpx"
						size="28" height="60rpx" background="#63d6d3" radius="100rpx">立即支付</tui-form-button>
					<tui-form-button @click="clickOrder(item,'取消订单')" margin="0 0 0 20rpx"
						v-if="item.status*1===1||item.status*1===2||item.status*1===3" width="160rpx" size="28" height="60rpx" plain
						background="#63d6d3" color="#63d6d3" radius="100rpx">取消订单</tui-form-button>
					<tui-form-button @click="clickOrder(item,'一件续费')" margin="0 0 0 20rpx" v-if="item.status*1===4" width="160rpx"
						size="28" height="60rpx" plain background="#63d6d3" color="#63d6d3" radius="100rpx">一件续费</tui-form-button>
					<tui-form-button @click="clickOrder(item,'联系教练')" margin="0 0 0 20rpx"
						v-if="item.status*1===3 || item.status*1===4  || item.status*1===5  || item.status*1===6" width="160rpx"
						size="28" height="60rpx" background="#63d6d3" radius="100rpx">联系教练</tui-form-button>
					<tui-form-button @click="clickOrder(item,'删除订单')" margin="0 0 0 20rpx"
						v-if="item.status*1===5||item.status*1===6" width="160rpx" size="28" height="60rpx" plain
						background="#63d6d3" color="#63d6d3" radius="100rpx">删除订单</tui-form-button>
					<tui-form-button @click="clickOrder(item,'立即评价')" margin="0 0 0 20rpx" v-if="item.status*1===5" width="160rpx"
						size="28" height="60rpx" background="#63d6d3" radius="100rpx">立即评价</tui-form-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'order_item',
		emits: ['orderClick'],
		props: {
			//订单数据
			list: {
				type: Array,
				// 1 邀约中 2 已确认 3服务中 4待评价 5 已完成
				default: []
			},
			//oss链接
			ossUrl: {
				type: String,
				default: null
			}

		},
		data() {
			return {

			};
		},

		methods: {
			clickOrder(item, type) {
				let obj = {
					...item,
					type
				}
				console.log(obj, '----------', type)
				this.$emit('orderClick', obj)
			},
			goDetails(item) {
				uni.navigateTo({
					url: '/pages/mine/modules/orderDetails/orderDetails?orderId=' + item.id
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.TutorStatusCards {
		margin-top: 30rpx;
		padding: 0 30rpx;

		.item {
			box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(214, 214, 214, 0.5);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
		}

		.card {
			background-color: #fff;
			border-radius: 20rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #b2b3b3;
				padding: 20rpx;
				font-size: 24rpx;
				border-bottom: 2rpx solid #f6f6f6;

				.invite {
					color: #ed6e5e;
				}
			}

			.content {
				padding: 20rpx;
				display: flex;

				.content_lt {
					width: 160rpx;
					height: 160rpx;
					overflow: hidden;
					/* 防止图片溢出 */
					border-radius: 20rpx;

					.image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.content_rt {
					width: calc(100% - 140rpx);
					padding-left: 20rpx;

					.tp {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.tp_lt {
							font-weight: 600;
							font-size: 36rpx;
						}
					}

					.ct {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 16rpx 0;

						.ct_lt {
							background-color: #fef8e6;
							color: #f6b455;
							padding: 4rpx 8rpx;
							font-size: 28rpx;
							border-radius: 10rpx;
						}
					}

					.bt {
						color: #777777;
						font-size: 28rpx;
					}
				}

			}

			.bottom {
				color: #b0b1b1;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;

				.total {
					color: #646464;
					display: flex;
					align-items: center;
				}

				.totalPrice {
					color: #e25e42;
					font-weight: bold;
					font-size: 36rpx;
				}
			}

			.footer {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: calc(100% - 40rpx);
				padding: 20rpx;

				.button_item {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					width: 85%;
				}
			}
		}
	}
</style>